<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>实时资源监控</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/echarts.js"></script>
</head>
<body>
<!-- 添加数据范围选择器 -->
<div style="margin-top: 20px;">
    <label for="dataRange">实时资源监控>>选择时间范围（分钟）：</label>
    <select id="dataRange">
        <option value="1">1分钟</option>
        <option value="2">2分钟</option>
        <option value="3">3分钟</option>
        <option value="4">4分钟</option>
        <option value="5">5分钟</option>
    </select>
</div>
<div style="display: flex; justify-content: space-between; width: 100%; height: 200px;">
    <div id="main_mem" style="flex: 1; min-width: 45%; height: 100%;"></div>
    <div id="main_cpu" style="flex: 1; min-width: 45%; height: 100%;"></div>
</div>
<div style="display: flex; justify-content: space-between; width: 100%; height: 200px;">
    <div id="main_storage" style="flex: 1; min-width: 45%; height: 100%;"></div>
</div>

<script>
    // 定义全局变量
    let MAX_DATA_COUNT = 60; // 默认60秒（1分钟）
    // 初始化执行的代码
    $(document).ready(function () {
        // 初始化图表和数据
        initData();
        initializeCharts();

        // 定时更新图表
        setInterval(async () => {
            const monitor = await getLatest();
            if (monitor) {
                updateCharts(monitor);
            }
        }, 1000);

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', () => {
            charts.forEach(chart => chart.instance.resize());
        });

        // 监听数据范围选择变化
        $('#dataRange').change(function () {
            console.log('数据范围选择变化：', $(this).val())
            const selectedMinutes = parseInt($(this).val());
            updateDataRange(selectedMinutes);
        });
    });

    // 定义图表配置
    const charts = [
        {id: 'main_mem', key: 'memUsageRate', name: '内存使用率', data: []},
        {id: 'main_cpu', key: 'cpuUsageRate', name: 'CPU使用率', data: []},
        {id: 'main_storage', key: 'storageUsageRate', name: '存储使用率', data: []}
    ];

    // 初始化图表实例和选项
    function initializeCharts() {
        charts.forEach(chart => {
            chart.instance = echarts.init(document.getElementById(chart.id));
            const option = createChartOption(chart.name);
            chart.instance.setOption(option);
        });
    }

    // 创建图表选项
    function createChartOption(titleText) {
        return {
            title: {
                text: `${titleText}，近${MAX_DATA_COUNT / 60}分钟`,
                textStyle: {
                    fontSize: 15
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    const date = new Date(params.value[0]);
                    return [
                        '时间: ' + date.toLocaleTimeString(),
                        '使用率: ' + params.value[1].toFixed(2) + '%'
                    ].join('<br/>');
                }
            },
            xAxis: {
                type: 'time',
                axisLabel: {
                    formatter: value => new Date(value).toLocaleTimeString()
                },
                splitLine: {show: false}
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 100,
                axisLabel: {formatter: '{value} %'}
            },
            series: [{
                name: titleText,
                type: 'line',
                showSymbol: false,
                smooth: true,
                areaStyle: {},
                data: []
            }]
        };
    }

    // 初始化数据
    function initData() {
        let now = Date.now();
        for (let i = MAX_DATA_COUNT; i > 0; i--) {
            const timestamp = now - i * 1000;
            charts.forEach(chart => {
                chart.data.push({name: timestamp, value: [timestamp, 0]});
            });
        }
    }

    // 获取最新的监控数据
    async function getLatest() {
        try {
            const response = await $.ajax({
                url: '/latest',
                cache: false
            });
            return response.data;
        } catch (error) {
            console.error('获取监控数据失败:', error);
            return null;
        }
    }

    // 更新图表数据
    function updateCharts(monitor) {
        const now = Date.now();
        charts.forEach(chart => {
            // 添加新数据
            chart.data.push({
                name: now,
                value: [now, monitor[chart.key] * 1]
            });

            // 控制最大长度
            if (chart.data.length > MAX_DATA_COUNT) {
                chart.data.shift();
            }

            // 更新图表
            chart.instance.setOption({
                series: [{data: chart.data}]
            });
        });
    }

    // 更新数据范围
    function updateDataRange(minutes) {
        // 计算新的最大数据点数
        const newMaxDataCount = minutes * 60;

        // 更新每个图表的数据
        charts.forEach(chart => {
            // 如果新数据点数小于当前数据长度，截断数据
            if (newMaxDataCount < chart.data.length) {
                chart.data = chart.data.slice(-newMaxDataCount);
            }

            // 更新图表标题
            const option = chart.instance.getOption();
            option.title[0].text = `${chart.name}，近${minutes}分钟`;
            chart.instance.setOption(option);
        });

        // 更新全局变量
        MAX_DATA_COUNT = newMaxDataCount;
    }


</script>
</body>
</html>